<template>
  <vol-box
    :footer="false"
    v-model="model"
    :height="height"
    :width="width"
    :padding="0"
    :lazy="true"
    title="审核"
  >
    <div class="audit-model-content" :style="{ height: height - 70 + 'px' }">
      <el-radio-group
        v-show="hasFlow"
        style="padding-left: 15px"
        v-model="activeName"
        class="ml-4"
      >
        <el-radio label="audit" size="large">{{ $ts("审核") }}</el-radio>
        <el-radio label="log" size="large">{{ $ts("审核记录") }}</el-radio>
      </el-radio-group>
      <div v-show="activeName == 'audit' || !hasFlow" class="audit-content">
        <div class="fx-left" v-if="hasFlow">
          <div class="v-steps">
            <div v-for="(item, index) in workFlowSteps" :key="index">
              <div class="step-item" v-if="item.stepAttrType == 'start'">
                <div class="left-item">
                  <div>{{ $ts("流程开始") }}</div>
                  <div class="left-date">{{ item.createDate }}</div>
                </div>
                <div class="right-item">
                  <div class="step-line"></div>
                  <i class="step-circle"></i>
                  <div class="step-title">
                    {{ item.stepName }}
                  </div>
                  <div class="step-text">{{ $ts("发起人") }}：{{ item.creator }}</div>
                </div>
              </div>
              <div class="step-item" v-else-if="item.stepAttrType == 'end'">
                <div class="left-item">
                  <div>{{ $ts("流程结束") }}</div>
                </div>
                <div class="right-item">
                  <div class="step-line"></div>
                  <i class="step-circle"></i>
                  <div class="step-title">
                    {{ item.stepName }}
                  </div>
                </div>
              </div>
              <div v-else :class="{ 'step-current': item.isCurrent }" class="step-item">
                <div class="left-item">
                  <div>{{ $ts("审批时间") }}</div>
                  <div class="left-date">
                    {{ item.auditDate || $ts("待审批") }}
                  </div>
                </div>
                <div class="right-item">
                  <div class="step-line"></div>
                  <i class="step-circle"></i>
                  <div class="step-title">
                    {{ item.stepName }}
                  </div>
                  <div class="step-text">{{ $ts("审批人") }}：{{ item.auditor }}</div>
                  <div class="step-text">
                    {{ $ts("状态") }}： {{ getAuditStatus(item.auditStatus) }}
                  </div>
                  <div class="step-text">
                    {{ $ts("备注") }}： {{ item.remark || "-" }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="fx-right"
          :style="{ width: !hasFlow ? '100%' : '400px' }"
          v-if="isCurrentUser || !hasFlow"
        >
          <div v-if="!hasFlow">
            <el-alert
              :title="$tst('当前选中【{$ts}】条记录待审核..', rowLen)"
              type="success"
              :closable="false"
            />
          </div>
          <div class="rd">
            <span>{{ $ts("审批") }}：</span>
            <el-radio-group style="margin-left: 15px" v-model="auditParam.value">
              <el-radio
                v-for="item in auditParam.data"
                :key="item.value"
                :label="item.value"
              >
                <span>{{ item.text }}</span>
              </el-radio>
            </el-radio-group>
          </div>
          <el-input
            style="padding-top: 10px"
            v-model="auditParam.reason"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10 }"
            :placeholder="$ts('请输入') + '...'"
          ></el-input>
          <div class="btn">
            <el-button type="primary" @click="auditClick" icon="Check">{{
              $ts("审批")
            }}</el-button>
          </div>
        </div>
      </div>
      <div v-show="activeName == 'log'">
        <vol-table
          :tableData="tableData"
          :columns="columns"
          :height="370"
          :pagination-hide="true"
          :load-key="false"
          :text-inline="false"
          :ck="false"
        ></vol-table>
      </div>
    </div>
  </vol-box>
</template>
<script>
import VolTable from "@/components/basic/VolTable.vue";
import VolBox from "@/components/basic/VolBox.vue";
import http from "@/../src/api/http.js";
import { defineComponent, ref, reactive, getCurrentInstance } from "vue";
export default defineComponent({
  components: {
    VolTable,
    VolBox,
  },
  props: {
    option: {
      //生成vue文件的table参数
      type: Object,
      default: {
        key: "",
        cnName: "",
        name: "",
        url: "",
      },
    },
  },
  setup(props, { emit }) {
    const height = ref(500);
    const width = ref(820);
    const model = ref(false);
    const workFlowSteps = reactive([]);

    const hasFlow = ref(false);

    const auditParam = reactive({
      //审核对象
      rows: 0, //当前选中审核的行数
      model: false, //审核弹出框
      value: -1, //审核结果
      reason: "", //审核原因
      //审核选项(main.js里面可以添加其他选项)
      data: [],
    });
    const { proxy } = getCurrentInstance();
    auditParam.data = proxy.$global.audit.data;
    const tableData = reactive([]);
    const columns = reactive([
      { title: "节点", field: "stepName", width: 100 },
      { title: "审批人", field: "auditor", width: 80 },
      {
        title: "审批结果",
        field: "auditStatus",
        width: 70,
        bind: { data: [] },
      },
      { title: "审批时间", field: "auditDate", width: 145 },
      { title: "备注", field: "remark", width: 120 },
    ]);

    const isCurrentUser = ref(null);
    const activeName = ref("audit");

    const auditDic = reactive([]);
    const getAuditStatus = (key) => {
      return (
        auditDic.find((x) => {
          return x.key === key + "";
        }) || { value: key }
      ).value;
    };
    const rowLen = ref(0);
    let currentRows = [];
    let $ts = proxy.$ts;
    const getAuditInfo = () => {
      const table = props.option.url.replaceAll("/", "");
      const url = `api/Sys_WorkFlow/getSteps?tableName=${table}`;
      let ids = currentRows.map((x) => {
        return x[props.option.key];
      });
      // ['498043c1-fbd0-4a35-a870-523823912a9b']
      http.post(url, ids, true).then((result) => {
        if (!result.status) {
          proxy.$message.error(result.message);
          return;
        }

        hasFlow.value = !!(result.list || []).length;
        if (!hasFlow.value) {
          let auditStatus = Object.keys(currentRows[0]).find((x) => {
            return x.toLowerCase() === "auditstatus";
          });

          let checkStatus = currentRows.every((x) => {
            return proxy.$global.audit.status.some((c) => {
              return c === x[auditStatus] || !x[auditStatus];
            });
          });
          if (!checkStatus) {
            proxy.$message.error($ts("只能选择待审批或审核中的数据"));
            return;
          }
          rowLen.value = currentRows.length;
          model.value = true;
          width.value = 430;
          height.value = 330;
          isCurrentUser.value = true;
          //没有审批流程的数据只显示
          return;
        }
        model.value = true;
        height.value = document.body.clientHeight * 0.9;
        width.value = 820;
        if (!auditDic.length) {
          auditDic.push(...(result.auditDic || []));
          columns.forEach((item) => {
            if (item.field == "auditStatus") {
              item.bind.data = auditDic;
            }
          });
        }
        isCurrentUser.value = result.list.some((x) => {
          return x.isCurrentUser;
        });
        workFlowSteps.length = 0;
        workFlowSteps.push(...result.list);
        tableData.length = 0;
        tableData.push(...result.log);
      });
    };
    //

    const auditClick = () => {
      if (auditParam.value == -1) {
        proxy.$message.error($ts("请选择审批项"));
        return;
      }
      emit("auditClick", auditParam, currentRows, (result) => {
        if (result.status) {
          model.value = false;
          tableData.length = 0;
        }
      });
    };

    const open = (rows) => {
      currentRows = rows;
      activeName.value = "audit";
      auditParam.reason = "";
      auditParam.value = -1;
      getAuditInfo();
    };

    return {
      columns,
      height,
      width,
      model,
      workFlowSteps,
      getAuditInfo,
      getAuditStatus,
      activeName,
      reactive,
      tableData,
      auditParam,
      auditClick,
      open,
      isCurrentUser,
      hasFlow,
      rowLen,
    };
  },
});
</script>

<style lang="less" scoped>
.audit-model-content {
  padding: 10px;
}

.step-item {
  background: #fff;
  display: flex;
}

.left-item {
  min-width: 180px;
  text-align: right;
  padding-right: 25px;
  padding-top: 8px;

  .left-date {
    font-size: 13px;
    padding-top: 7px;
    color: #6c6c6c;
  }
}

.right-item {
  cursor: pointer;
  position: relative;
  border-bottom: 1px solid #f3f3f3;
  padding: 5px 0 5px 5px;
}

.left-item,
.right-item {
  padding-bottom: 10px;
}

.right-item:last-child {
  border-bottom: 0;
}

.step-line {
  top: 16px;
  left: -10px;
  width: 1px;
  height: 100%;
  position: absolute;
  background-color: #ebedf0;
}

.step-circle {
  position: absolute;
  top: 17px;
  left: -9px;
  z-index: 2;
  font-size: 12px;
  line-height: 1;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  background-color: #a1a1a1;
  border-radius: 50%;
}

.right-item::before {
  content: "";
}

.step-content {
  padding-top: 2px;
  font-size: 14px;
  color: #828282;
  line-height: 1.5;
}

.step-title {
  font-weight: bold;
  padding-top: 3px;
}

.step-text {
  font-size: 13px;
  color: #999999;
  padding-top: 6px;
}

.step-current {
  * {
    color: #2f95ff !important;
  }

  .step-circle {
    background: #2f95ff !important;
  }

  // border-radius: 5px;
  // border: 1px solid #d6eaff;
  font-size: 13px;
  padding-top: 6px;
  // background-color: #eff7ffd9;
  color: black;
}

.audit-content {
  // background: #f9f9f9;
  padding: 10px;
  border-radius: 4px;
  display: flex;

  .fx-left {
    flex: 1;
    width: 0;

    .rd {
      display: flex;
      align-items: baseline;
    }
  }

  .fx-right {
    // width: 400px;

    .btn {
      margin-top: 10px;
      text-align: center;
    }
  }
}
</style>
